<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        placeholder="请输入订单编号"
        size="small"
      />
      <el-button type="primary" size="default" @click="handelSearch">搜索</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="编号" width="90">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>

      <el-table-column type="index" align="center" label="订单编号" width="150">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="提交时间编号" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.graduate_time }}</span>
        </template>
      </el-table-column>

     

      <el-table-column label="用户账号" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.Account }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单金额" property="price" align="center" width="90">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>

      <el-table-column label="支付方式" property="pay" align="center" width="90">
        <template slot-scope="scope">
          {{ scope.row.pay }}
        </template>
      </el-table-column>

      <el-table-column label="订单来源" property="source" align="center" width="90">
        <template slot-scope="scope">
          {{ scope.row.source }}
        </template>
      </el-table-column>

      <el-table-column label="订单状态" property="state" align="center" width="90">
        <template slot-scope="scope">
          {{ scope.row.state }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <div class="flex-box">
            <el-button type="success" size="mini" @click="ViewOrdes(row)">查看订单</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除订单</el-button>

          </div>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
import { getList } from '@/api/orders'

export default {

  data() {
    return {
      list: null,
      listLoading: true,
      items: []

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then((response) => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleDelete(index, row) {
      this.list.splice(index, 1)

      this.$notify({
        title: '操作',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
    },
    ViewOrdes() {
      console.log('订单信息')
      this.$router.push('/shopping/orders')
    }
  }
}
</script>
